<template>
  <view class="container">
    <uni-list>
      <uni-list-item
        showExtraIcon="true"
        :extraIcon="{type: 'person-filled'}"
        title="头像"
        clickable
        link
        @click="clickAvatar"
      >
        <template #footer>
          <image
            class="avatar-img"
            :src="userInfo.avatar"
            mode="aspectFill"
          />
        </template>
      </uni-list-item>
      <uni-list-item
        showExtraIcon="true"
        :extraIcon="{ type: 'person-filled' }"
        title="昵称"
        :rightText="userInfo.userName"
        clickable
        link
        @click="clickUserName"
      />
      <uni-list-item
        showExtraIcon="true"
        :extraIcon="{ type: 'phone-filled' }"
        title="性别"
        clickable
        link
        @click="clickSex"
        :rightText="sexConfig[userInfo.sex] || '未知'"
      />
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="电话" :rightText="userInfo.phoneNumber" />
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'calendar-filled' }" title="创建日期" :rightText="userInfo.createTime" />
    </uni-list>
    <you-popup
      :popupVisible="popupVisible"
			:showBtn="false"
      :popupTitle="popupTitle"
      @popupClose="popupVisible = false"
    >
      <template slot="popupContent" class="content">
        <view class="img-upload" v-if="popupType === 'editAvatar'">
          <view v-if="form.avatar" class="img-box">
            <image class="img"  :src="form.avatar" mode="aspectFill"></image>
            <uni-icons type="close" size="26" color="#444" class="close-icon" @click="form.avatar = null"></uni-icons>
          </view>
          <uni-file-picker :del-icon="false" v-else class="img-load" @select="imgSelect" limit="1"></uni-file-picker>
        </view>
        <view class="upload" v-if="popupType === 'editUserName'">
          <uni-easyinput class="custom-input" v-model="form.userName" focus placeholder="请输入昵称"></uni-easyinput>
        </view>
        <view class="upload" v-if="popupType === 'editSex'">
          <uni-data-select
            v-model="form.sex"
            :localdata="sexList"
          ></uni-data-select>
        </view>
        <view class="btn-box">
          <view class="cancel-btn" @click="popupVisible = false">取消</view>
          <view class="confirm-btn" @click="clickConfirm">提交</view>
        </view>
      </template>
    </you-popup>
  </view>
</template>

<script>
  import api_mine from '@/api/mine'
  import YouPopup from '@/components/you-popup2/index'
  import pageConfig from '@/config'

  export default {
    components : { YouPopup },
    data() {
      return {
        baseUrl: pageConfig.baseUrl,
        userInfo: {},
        user: {},
        roleGroup: "",
        postGroup: "",
        popupVisible: false,
        popupTitle: '',
        popupType: '',
        form: {},
        sexList: [
          { value: 0, text: '男' },
          { value: 1, text: '女' }
        ],
        sexConfig: { 0: '男', 1: '女' }
      }
    },
    onLoad() {
      this.userInfo = uni.getStorageSync('userInfo')
      this.form = { ...this.userInfo }
    },
    methods: {
      clickAvatar() {
        this.popupTitle = '上传头像'
        this.popupType = 'editAvatar'
        this.form = { ...this.userInfo }
        this.popupVisible = true
      },
      clickUserName() {
        this.popupTitle = '修改昵称'
        this.popupType = 'editUserName'
        this.form = { ...this.userInfo }
        this.popupVisible = true
      },
      clickSex() {
        this.popupTitle = '修改性别'
        this.popupType = 'editSex'
        this.form = { ...this.userInfo }
        this.popupVisible = true
      }, 
        // 文件类型上传
      imgSelect($event, ) {
        const tempFiles = $event.tempFiles[0]
        uni.uploadFile({
          url: this.baseUrl + '/common/upload',
					filePath: tempFiles.path,
          name: 'file',
          header: {
            "Authorization": 'Bearer ' + uni.getStorageSync('App-Token')
          },
          // 成功函数
          success: (res) => {
            // 取到文档服务器的值
            let uploadData = JSON.parse(res.data)
            this.form.avatar = this.baseUrl + uploadData.fileName
          },
          // 失败提示用户重新上传
          fail: error => {
            console.log('失败', error)
          }
        })
      },
      clickConfirm() {
        if (this.popupType === 'editUserName' && !this.form.userName) {
          uni.showToast({
            title: '请输入昵称',
            icon: 'none'
          })
          return
        }
        if (this.popupType === 'editAvatar' && !this.form.avatar) {
          uni.showToast({
            title: '请上传图片',
            icon: 'none'
          })
          return
        }
        const params = {
          id: this.userInfo.id,
          ...this.form
        }
        api_mine.editUserInfo(params).then(res => {
          if (res.code !== 200) return
          uni.showToast({
            title: '修改成功',
            icon: 'none'
          })
          this.getUserInfo()
        })
      },
      getUserInfo() {
				api_mine.fetchUserInfo().then(res => {
					if (res.code !==200) return
					this.userInfo = res.data
					uni.setStorageSync('userInfo', res.data)
          this.popupVisible = false
				})
			}
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }
  .avatar-img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
  }
  ::v-deep.content {
    padding: 0 34rpx 34rpx;
    border-radius: 16rpx;
    .uni-file-picker__container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .img-upload {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .img-box {
        position: relative;
        .img {
          width: 136rpx;
          height: 136rpx;
          border-radius: 8rpx;
        }
        .close-icon {
          position: absolute;
          top: -20rpx;
          right: -20rpx;
        }
      }
      .img-load {
        width: 150rpx;
        height: 150rpx;
      }
    }
  }
  .btn-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .confirm-btn,
    .cancel-btn {
      width: 48%;
      height: 64rpx;
      display: flex;
      justify-content: center;
      margin-top: 60rpx;
      align-items: center;
      border-radius: 38rpx;
      border: 2rpx solid #c27e15;
      color: #fff;
      background-color: #c27e15;
    }
    .cancel-btn {
      color: #c27e15;
      background-color: #fff;
    }
  }
  ::v-deep.uni-easyinput {
    .is-focused {
      border: 2rpx solid #ccc !important; /* 设置边框样式为灰色 */
    }
    .uni-icons {
      color: #c0c4cc !important;
    }
  }
</style>
